<template>
	<div>
		<div class="flex">
			<div class="w-1/2 pr-2">
				<!-- 基本信息 -->
				<div class="flex items-center">
					<img src="/images/status/headPortrait.png" alt="默认图片" style="width: 130px;height: 160px;" v-if="userPhotoShow">
					<BDMImage :authSrc="user_photo" style="width: 130px;height: 160px;" v-if="!userPhotoShow">
					</BDMImage>
					<div class="pl-4">
						<span class="text-gray-700 text-2xl font-medium">{{userInfo.nick_name}}</span>
						<div class="flex mb-2 mt-2">
							<div class="text-blue-700 pt-1 pb-1 pl-4 pr-4 bg-blue-100 rounded mr-2">{{sex}}</div>
							<div class="text-blue-700 pt-1 pb-1 pl-4 pr-4 bg-blue-100 rounded mr-2">{{userInfo.age}}岁
							</div>
							<div class="text-orange-700 pt-1 pb-1 pl-4 pr-4 bg-orange-100 rounded"
								v-show="stateShow[0]">{{state}}</div>
							<div class="text-green-700 pt-1 pb-1 pl-4 pr-4 bg-green-100 rounded" v-show="stateShow[1]">
								{{state}}
							</div>
							<div class="text-gray-700 pt-1 pb-1 pl-4 pr-4 bg-gray-100 rounded" v-show="stateShow[2]">
								{{state}}
							</div>
						</div>
						<span class="text-gray-400">权限：{{userInfo.authority_name}}</span>
					</div>
				</div>
				<!-- 个人信息 -->
				<div class="flex items-center justify-between mt-8 mb-4">
					<span class="text-gray-400">个人信息</span>
					<div class="flex items-center group cursor-pointer" @click="UserInfoUpdate()" v-show="isButtonAuthority('编辑详情')">
						<img src="/images/icon/editIcon.svg" alt="editIcon" class="mr-2">
						<span class="text-blue-700 group-hover:underline">编辑</span>
					</div>
				</div>
				<div class="w-full bg-gray-100 p-4">
					<div class="flex">
						<div class="w-1/4">
							<span class="text-gray-700 font-medium">{{userInfo.name}}</span>
							<div class="text-gray-400">真实姓名</div>
						</div>
						<div class="w-1/4">
							<span class="text-gray-700 font-medium">{{userInfo.phone}}</span>
							<div class="text-gray-400">手机号码</div>
						</div>
						<div class="w-1/4">
							<span class="text-gray-700 font-medium">{{userInfo.birth_date}}</span>
							<div class="text-gray-400">出生日期</div>
						</div>
						<div class="w-1/4">
							<span class="text-gray-700 font-medium">{{userInfo.id_number ? userInfo.id_number : '-'}}</span>
							<div class="text-gray-400">身份证号码</div>
						</div>
					</div>
					<div class="flex mt-4">
						<div class="w-1/2">
							<span class="text-gray-700 font-medium">{{userInfo.address}}</span>
							<div class="text-gray-400">现住地址</div>
						</div>
						<div class="w-1/4">
							<span class="text-gray-700 font-medium">{{userInfo.bank}}</span>
							<div class="text-gray-400">开户银行</div>
						</div>
						<div class="w-1/4">
							<span class="text-gray-700 font-medium">{{userInfo.bank_number}}</span>
							<div class="text-gray-400">银行卡号</div>
						</div>
					</div>
				</div>
			</div>
			<div class="w-1/2 pl-2 flex-grow">
				<div class="h-full w-full flex flex-col">
					<!-- 保险信息 -->
					<div class="flex items-center justify-between mb-4">
						<span class="text-gray-400">保险信息</span>
						<UpdateInsurance v-show="updateInsuranceShow()"></UpdateInsurance>
					</div>
					<div class="p-4 bg-gray-100 flex-grow" style="overflow-y: auto; height: 0;">
						<ul>
							<li 
							class="flex mb-4" 
							v-for="(item, index) in insuranceArr" 
							:key="index"
							v-show="InsuranceListShow()">
								<div class="w-1/5">
									<span class="text-gray-700 font-medium">{{item.insurance_date}}</span>
									<div class="text-gray-400">上险日期</div>
								</div>
								<div class="w-1/5">
									<span class="text-gray-700 font-medium">{{item.type}}</span>
									<div class="text-gray-400">交保类型</div>
								</div>
								<div class="w-1/5">
									<span class="text-gray-700 font-medium">{{item.account_number}}</span>
									<div class="text-gray-400">保险账号</div>
								</div>
								<div class="w-2/5">
									<span class="text-gray-700 font-medium">{{item.remarks ? item.remarks : '-'}}</span>
									<div class="text-gray-400">备注</div>
								</div>
							</li>
						</ul>
						<div v-show="!InsuranceListShow() && isButtonAuthority('保险办理')">当前暂无保险信息</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex mt-8">
			<div class="w-1/2 pr-2">
				<!-- 岗位信息 -->
				<div class="flex items-center justify-between mb-4">
					<span class="text-gray-400">岗位信息</span>
					<div class="flex text-gray-400">
						已在贝德米渡过<span class="text-blue-700">{{userInfo.post_time}}</span>天
					</div>
				</div>
				<div class="bg-gray-100 p-4" style="min-height: 12rem;">
					<div class="flex">
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.department1_name}}</span>
							<div class="text-gray-400">所属部门</div>
						</div>
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.position_name}}</span>
							<div class="text-gray-400">岗位</div>
						</div>
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.entry_date}}</span>
							<div class="text-gray-400">入职时间</div>
						</div>
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.try_out_money}}</span>
							<div class="text-gray-400">试用工资</div>
						</div>
					</div>
					<div class="flex mt-4 mb-4" v-show="stateShow[1] || stateShow[2]">
						<div class="w-2/5"></div>
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.regularization_date}}</span>
							<div class="text-gray-400">转正时间</div>
						</div>
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.official_salary}}</span>
							<div class="text-gray-400">转正工资</div>
						</div>
					</div>
					<div class="flex" v-show="stateShow[2]">
						<div class="w-2/5"></div>
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.leave_date}}</span>
							<div class="text-gray-400">离职时间</div>
						</div>
						<div class="w-1/5">
							<span class="text-gray-700 font-medium">{{userInfo.leave_reason}}</span>
							<div class="text-gray-400">离职原因</div>
						</div>
					</div>
				</div>
			</div>
			<div class="w-1/2 pl-2 flex-grow">
				<div class="flex h-full w-full flex-col">
					<span class="text-gray-400 mb-4">考勤信息</span>
					<div class="bg-gray-100 flex-grow">
						<div class="h-full w-full flex items-center justify-between p-4">
							<div class="w-1/5 h-1/2 flex flex-col justify-between">
								<div class="text-center text-3xl text-blue-700">{{attendance.s_office_day}}</div>
								<div class="text-gray-400 text-center">本月已累计在岗/天</div>
							</div>
							<div class="w-1/5 h-1/2 flex flex-col justify-between">
								<div class="text-center text-3xl text-gray-700">{{attendance.s_overtime_day}}</div>
								<div class="text-gray-400 text-center">加班时长/h</div>
							</div>
							<div class="w-1/5 h-1/2 flex flex-col justify-between">
								<div class="text-center text-3xl text-gray-700">{{attendance.s_rest_day}}</div>
								<div class="text-gray-400 text-center">已调休/天</div>
							</div>
							<div class="w-1/5 h-1/2 flex flex-col justify-between">
								<div class="text-center text-3xl text-gray-700">
									{{attendance.s_rest_all_day - attendance.s_rest_day}}
								</div>
								<div class="text-gray-400 text-center">剩余休息/天</div>
							</div>
							<div class="w-1/5 h-1/2 flex flex-col justify-between">
								<div class="text-center text-gray-700 font-medium" style="padding-top: 5%;">
									{{attendance.last_rest_date}}
								</div>
								<div class="text-gray-400 text-center">最近调休日期</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex mt-4">
			<div class="w-1/2 flex pr-2">
				<t-button variant="outline" class="mr-4" v-show="trial_contractButtonShow"
					@click="fileDownload(userInfo.trial_contract, '试用合同', 'trialLoading')" :loading="trialLoading">
					<DownloadIcon slot="icon" />
					试用合同下载
				</t-button>
				<t-button variant="outline" class="mr-4" v-show="regularization_pdfButtonShow"
					@click="fileDownload(userInfo.regularization_pdf, '转正合同', 'regularizationLoading')" :loading="regularizationLoading">
					<DownloadIcon slot="icon" />
					转正合同下载
				</t-button>
				<t-button variant="outline" v-show="leave_pdfButtonShow"
					@click="fileDownload(userInfo.leave_pdf, '离职证明', 'leaveLoading')" :loading="leaveLoading">
					<DownloadIcon slot="icon" />
					离职证明下载
				</t-button>
			</div>
			<div class="w-1/2 flex justify-between pl-2">
				<div class="flex">
					<t-button 
					class="mr-4" 
					v-show="(!stateShow[1] && !stateShow[2]) && isButtonAuthority('转正办理')"
					@click="regulaButtonClick"
					>转正办理</t-button>
					<t-button 
					class="mr-4" 
					v-show="!stateShow[2] && isButtonAuthority('离职办理')"
					@click="leaveButtonClick"
					>离职办理</t-button>
					<InsuranceButton v-show="insuranceButtonShow() && isButtonAuthority('保险办理')" btnShow="true" :props_user_id="this.$route.query.id">保险办理</InsuranceButton>
				</div>
				<t-button variant="outline" @click="salary()" v-show="isButtonAuthority('查询工资对方工资记录')">工资记录</t-button>
			</div>
		</div>
		<!-- 转正抽屉 -->
		<t-drawer 
		:visible="regulaVisible" 
		@close="regulaClose"
		:onConfirm="regulaSubmit" 
		header="转正办理">
			<div class="flex flex-col">
				<span>转正日期<span class="ml-1 text-red-800">*</span></span>
				<t-date-picker 
				class="mt-2" 
				v-model="regulaForm.regularization_date"
				placeholder="请选择转正日期"
				/>
			</div>
			<div class="mt-4">
				<span>转正工资<span class="ml-1 text-red-800">*</span></span>
				<t-input 
				class="mt-2" 
				v-model="regulaForm.official_salary"
				placeholder="请输入转正工资"
				:status="official_salary_status"
				:tips="official_salary_tips"
				:onBlur="officialSalaryTipsBlur"
				/>
			</div>
			<div class="mt-4">
				<span>转正合同</span>
				<t-upload
				class="mt-2" 
				action="http://127.0.0.1:3000/my/addPdf"
				accept="application/pdf"
				v-model="regulaFile"
				@fail="regulaFile"
				:headers="token"
				name="pdf"
				showUploadProgress :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不超过 {sizeLimit} MB' }"
				@success="regulaOnSuccess"
				/>
			</div>
		</t-drawer>
		<!-- 离职抽屉 -->
		<t-drawer 
		:visible="leaveVisible" 
		@close="leaveClose"
		:onConfirm="leaveSubmit" 
		header="离职办理">
			<div class="flex flex-col">
				<span>离职日期<span class="ml-1 text-red-800">*</span></span>
				<t-date-picker 
				class="mt-2" 
				v-model="leaveForm.leave_date"
				placeholder="请选择离职日期"
				/>
			</div>
			<div class="mt-4">
				<span>离职原因<span class="ml-1 text-red-800">*</span></span>
				<t-input 
				class="mt-2" 
				v-model="leaveForm.leave_reason"
				placeholder="请输入离职原因"
				:status="leave_reason_status"
				:tips="leave_reason_tips"
				:onBlur="leaveReasonTipsBlur"
				/>
			</div>
			<div class="mt-4">
				<span>离职证明</span>
				<t-upload
				class="mt-2" 
				:action="`${serveHttp}/my/addPdf`"
				accept="application/pdf"
				v-model="leaveFile"
				@fail="leaveFile"
				:headers="token"
				name="pdf"
				showUploadProgress :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不超过 {sizeLimit} MB' }"
				@success="leaveOnSuccess"
				/>
			</div>
		</t-drawer>
	</div>
</template>

<script>
	import { DownloadIcon } from 'tdesign-icons-vue'
	import BDMImage from '@/components/BDMImage'
	import { toDay } from '@/unit/myDate'
	import { getToken } from '@/unit/auth'
	import { isNumber, isSpecial } from '@/unit'
	import { isButtonAuthority } from '@/unit/buttonAuthority'
	import { serveHttp } from '@/unit/config'
	
	import InsuranceButton from '../InsuranceButton'
	import UpdateInsurance from '../UpdateInsurance'
	
	export default {
		name: 'UserInfoData',
		components: {
			DownloadIcon,
			BDMImage,
			InsuranceButton,
			UpdateInsurance
		},
		data() {
			return {
				serveHttp,
				user_photo: '',
				userPhotoShow: true,
				stateShow: [false, false, false],
				trial_contractButtonShow: false,
				regularization_pdfButtonShow: false,
				leave_pdfButtonShow: false,
				rowCol: [{
					type: 'rect',
					content: '头像加载中',
					width: '130px',
					height: '160px',
				}],
				loading: true,
				// 转正业务
				regulaVisible: false,
				regulaForm: {
					regularization_date: '',
					official_salary: '',
					id: '',
					regularization_pdf: '',
					state: 1
				},
				official_salary_status: '',
				official_salary_tips: '',
				regulaFile: [],
				regulaLialog: null,
				// 离职业务
				leaveVisible: false,
				leaveForm: {
					leave_date: '',
					leave_reason: '',
					id: '',
					leave_pdf: '',
					state: 2
				},
				leave_reason_status: '',
				leave_reason_tips: '',
				leaveFile: [],
				leaveLialog: null,
				trialLoading: false,
				regularizationLoading: false,
				leaveLoading: false
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfoData[1]
			},
			insuranceArr() {
				return this.$store.state.user.userInfoData[2]
			},
			attendance() {
				return this.$store.state.user.userInfoData[3]
			},
			sex() {
				if (this.userInfo.sex) {
					return '女'
				} else {
					return '男'
				}
			},
			state() {
				if (this.userInfo.state === 0) {
					return '实习'
				} else if (this.userInfo.state === 1) {
					return '已转正'
				} else if (this.userInfo.state === 2) {
					return '已离职'
				}
			},
			// 获取token设置请求头
			token() {
				let obj = {
					"Authorization": getToken()
				}
				return obj
			},
		},
		methods: {
			// 权限审核
			isButtonAuthority(str){
				return isButtonAuthority(str)
			},
			// 跳转到工资记录页
			salary(){
				this.$bus.emit('SalaryRecord')
			},
			// 请求用户详细信息
			getUser(id) {
				this.$store.dispatch('user/getUser', id).then(res => {
					if (res.status === 1) {
						return this.$message.error(res.message)
					}
					// 头像处理
					if (this.userInfo.user_photo) {
						this.user_photo = this.serveHttp + this.userInfo.user_photo
						this.userPhotoShow = true
						this.$nextTick(() => {
							this.userPhotoShow = false
						})
					} else {
						this.userPhotoShow = true
					}
					// 岗位状态处理
					if (this.userInfo.state === 0) {
						for (let i = 0; i < this.stateShow.length; i++) {
							this.stateShow[i] = false
						}
						this.stateShow[0] = true
					} else if (this.userInfo.state === 1) {
						for (let i = 0; i < this.stateShow.length; i++) {
							this.stateShow[i] = false
						}
						this.stateShow[1] = true
					} else if (this.userInfo.state === 2) {
						for (let i = 0; i < this.stateShow.length; i++) {
							this.stateShow[i] = false
						}
						this.stateShow[2] = true
					}
					// 合同下载按钮
					if (this.userInfo.trial_contract) {
						this.trial_contractButtonShow = true
					} else {
						this.trial_contractButtonShow = false
					}
					if (this.userInfo.regularization_pdf) {
						this.regularization_pdfButtonShow = true
					} else {
						this.regularization_pdfButtonShow = false
					}
					if (this.userInfo.leave_pdf) {
						this.leave_pdfButtonShow = true
					} else {
						this.leave_pdfButtonShow = false
					}
					// 空数值设置为-
					if (!this.userInfo.address) {
						this.userInfo.address = '-'
					}
					if (!this.userInfo.bank) {
						this.userInfo.bank = '-'
					}
					if (!this.userInfo.bank_number) {
						this.userInfo.bank_number = '-'
					}
					if (!this.userInfo.birth_date) {
						this.userInfo.birth_date = toDay()
					}
					if (!this.userInfo.age) {
						this.userInfo.age = 18
					}
					if (!this.userInfo.regularization_date) {
						this.userInfo.regularization_date = '-'
					}
				})
			},
			// 办理保险按钮显示
			insuranceButtonShow() { 
				if(this.userInfo.state === 2){
					return false
				} else {
					return true
				}
			},
			// 编辑保险显示
			updateInsuranceShow() {
				if (this.insuranceArr.length > 0 && this.userInfo.state < 2) {
					return true
				} else {
					return false
				}
			},
			// 保险列表显示
			InsuranceListShow(){
				if (this.insuranceArr.length > 0){
					return true
				} else {
					return false
				}
			},
			// 封装下载文件的方法
			fileDownload(url, fileName, loading) {
				// 将按钮变为加载状态
				if(loading === 'trialLoading'){
					this.trialLoading = true
				} else if(loading === 'regularizationLoading'){
					this.regularizationLoading = true
				} else {
					this.leaveLoading = true
				}
				// 开始下载
				this.$store.dispatch('dashboard/fileDownload', url).then(res => {
					const link = document.createElement('a');
					let blob = new Blob([res], {
						type: 'application/pptx;chartset=UTF-8'
					});
					link.style.display = 'none';
					link.href = URL.createObjectURL(blob);
					const newFileName = this.userInfo.name + '的' + fileName
					const fileType = url.substring(url.lastIndexOf(".") + 1)
					link.setAttribute('download', newFileName + '.' + fileType);
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
					window.URL.revokeObjectURL(link.href);
					this.trialLoading = false
					this.regularizationLoading = false
					this.leaveLoading = false
				})
			},
			// 编辑用户信息
			UserInfoUpdate() {
				this.$bus.emit('UserInfoUpdate')
			},
			// 转正抽屉状态
			setRegulaVisible(state) {
				this.regulaVisible = state
			},
			// 转正按钮点击
			regulaButtonClick() {
				this.setRegulaVisible(true)
			},
			// 转正取消按钮点击
			regulaClose(){
				this.setRegulaVisible(false)
				this.official_salary_status = ''
				this.official_salary_tips = ''
			},
			// 转正确认按钮点击
			regulaSubmit() {
				if (!this.officialSalaryTipsBlur()){
					this.$message.error('请检查转正工资是否按要求填写')
					return
				}
				this.regulaForm.id = this.$route.query.id
				// 判断用户是否提交上传了转正pdf，如果没上传，弹出弹窗做最后一次提示，如果上传了，直接提交
				if (this.regulaForm.regularization_pdf === ''){
					if (this.regulaLialog) {
						this.regulaLialog.show();
						return;
					}
					this.regulaLialog = this.$dialog({
						header: '提示',
						body: '转正合同未添加，是否确认转正提交',
						className: 't-dialog-new-class1 t-dialog-new-class2',
						style: 'color: rgba(0, 0, 0, 0.6)',
						onConfirm: ({ e }) => {
							delete this.regulaForm.regularization_pdf
							this.$store.dispatch('user/regularization', this.regulaForm).then((res) => {
								if (res.status === 0){
									this.$message.success(res.message)
								} else {
									this.$message.error(res.message)
								}
								this.getUser(this.$route.query.id)
								this.regulaLialog.hide()
								this.setRegulaVisible(false)
							})
						},
					});
				} else {
					this.$store.dispatch('user/regularization', this.regulaForm).then((res) => {
						if (res.status === 0){
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
						this.getUser(this.$route.query.id)
						this.setRegulaVisible(false)
					})
				}
			},
			// 转正合同上传成功
			regulaOnSuccess(context) {
				if (context.response.status == 0) {
					this.regulaForm.regularization_pdf = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
			// 转正工资校验
			officialSalaryTipsBlur(){
				if(this.regulaForm.official_salary === ''){
					this.official_salary_status = 'error'					this.official_salary_tips = '转正工资是必填项'
					return false
				} else {
					if(!isNumber(this.regulaForm.official_salary)){
						this.official_salary_status = 'error'
						this.official_salary_tips = '只能填数字'
						return false
					} else {
						this.official_salary_status = ''
						this.official_salary_tips = ''
						return true
					}
				}
			},
			// 离职抽屉状态
			setLeaveVisible(state) {
				this.leaveVisible = state
			},
			// 离职按钮点击
			leaveButtonClick() {
				this.setLeaveVisible(true)
			},
			// 离职取消按钮点击
			leaveClose(){
				this.setLeaveVisible(false)
				this.leave_reason_status = ''
				this.leave_reason_tips = ''
			},
			// 离职确认按钮点击
			leaveSubmit() {
				if (!this.leaveReasonTipsBlur()){
					this.$message.error('请检查离职原因是否按要求填写')
					return
				}
				this.leaveForm.id = this.$route.query.id
				// 判断用户是否提交上传了离职pdf，如果没上传，弹出弹窗做最后一次提示，如果上传了，直接提交
				if (this.leaveForm.leave_pdf === ''){
					if (this.leaveLialog) {
						this.leaveLialog.show();
						return;
					}
					this.leaveLialog = this.$dialog({
						header: '提示',
						body: '转正合同未添加，是否确认转正提交',
						className: 't-dialog-new-class1 t-dialog-new-class2',
						style: 'color: rgba(0, 0, 0, 0.6)',
						onConfirm: ({ e }) => {
							delete this.leaveForm.leave_pdf
							this.$store.dispatch('user/leave', this.leaveForm).then((res) => {
								if (res.status === 0){
									this.$message.success(res.message)
								} else {
									this.$message.error(res.message)
								}
								this.getUser(this.$route.query.id)
								this.leaveLialog.hide()
								this.setLeaveVisible(false)
							})
						},
					});
				} else {
					this.$store.dispatch('user/leave', this.leaveForm).then((res) => {
						if (res.status === 0){
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
						this.getUser(this.$route.query.id)
						this.setLeaveVisible(false)
					})
				}
			},
			// 离职证明上传成功
			leaveOnSuccess(context) {
				if (context.response.status == 0) {
					this.leaveForm.leave_pdf = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
			// 离职原因校验
			leaveReasonTipsBlur(){
				if(this.leaveForm.leave_reason === ''){
					this.leave_reason_status = 'error'
					this.leave_reason_tips = '离职原因是必填项'
					return false
				} else {
					if(!isSpecial(this.leaveForm.leave_reason)){
						this.leave_reason_status = 'error'
						this.leave_reason_tips = '请不要输入特殊字符'
						return false
					} else {
						this.leave_reason_status = ''
						this.leave_reason_tips = ''
						return true
					}
				}
			},
		},
		created() {
			// 调用请求用户详细数据
			this.getUser(this.$route.query.id)
			// 赋予默认值
			this.regulaForm.regularization_date = toDay()
			this.leaveForm.leave_date = toDay()
		},
		mounted() {
			// 接收到id传来的点击事件，发起一次请求
			this.$bus.on('getUserData', () => {
				this.getUser(this.$route.query.id)
				this.$bus.emit('goUserDataHome')
			})
		},
	}
</script>